<template>
  <div class="orders">
    <van-nav-bar title="全部订单" left-arrow @click-left="goBack" />
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell
          v-for="order in orders"
          :key="order.id"
          :title="order.title"
          :label="'金额: ' + order.amount"
          :value="order.status"
      />
    </van-list>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const orders = ref([])
const loading = ref(false)
const finished = ref(false)

const goBack = () => {
  router.back()
}

const onLoad = () => {
  loading.value = true
  setTimeout(() => {
    orders.value.push(...Array(10).fill().map((_, index) => ({
      id: orders.value.length + index,
      title: `订单 ${orders.value.length + index + 1}`,
      amount: `¥${(Math.random() * 100).toFixed(2)}`,
      status: '已完成'
    })))
    loading.value = false
    if (orders.value.length >= 30) {
      finished.value = true
    }
  }, 1000)
}
</script>
